import React from "react";
import GridWrapper from "../gridWrapper";
import ColorfulHistogramChart from "components/charts/music/colorfulHistogramChart";
import PictographHistogramChart from "components/charts/music/pictographHistogramChart";
import WordChart from "components/charts/wordChart";
import { compose, lifecycle, withStateHandlers } from "recompose";

import musicApi from "utils/api/musicApi";

import "assets/less/components/charts/computerChart.less";

// 布局位置
const layouts = {
  lg: [
    { i: "a", x: 0, y: 0, w: 24, h: 10, minH: 10, minW: 7 },
    { i: "b", x: 0, y: 0, w: 12, h: 15, minH: 10, minW: 7 },
    { i: "c", x: 12, y: 0, w: 12, h: 15, minH: 10, minW: 7 }
  ],
  md: [
    { i: "a", x: 0, y: 0, w: 20, h: 10, minH: 10, minW: 8 },
    { i: "b", x: 0, y: 0, w: 10, h: 15, minH: 10, minW: 7 },
    { i: "c", x: 10, y: 0, w: 10, h: 15, minH: 10, minW: 7 }
  ],
  sm: [
    { i: "a", x: 0, y: 0, w: 12, h: 10, minH: 10, minW: 6 },
    { i: "b", x: 0, y: 0, w: 6, h: 15, minH: 10, minW: 6 },
    { i: "c", x: 6, y: 0, w: 6, h: 15, minH: 10, minW: 6 }
  ]
};

const DoubanMovieChart = ({ musics }) => {
  return (
    <GridWrapper className="computer-chart" layouts={layouts}>
      <ColorfulHistogramChart
        title="网易云音乐热搜关键词"
        name="搜索次数"
        data={musics.slice(0, 10)}
      />
      <PictographHistogramChart title="网易云音乐热搜频率" name="搜索次数" data={musics.slice(0, 10)} />
      <WordChart title="网易云音乐热搜云图" name="搜索次数" data={musics.map(item => ({name: item.searchWord, value: item.score}))} />
    </GridWrapper>
  );
};

export default compose(
  withStateHandlers(
    () => ({
      musics: []
    }),
    {
      updateMusics: () => ({ musics }) => {
        return {
          musics
        };
      }
    }
  ),
  lifecycle({
    componentDidMount() {
      const { updateMusics } = this.props;

      musicApi("/music/hotsearch").then(musics => {
        updateMusics({ musics });
      });
    }
  })
)(DoubanMovieChart);
